<template>
	<u-popup mode="center" :show="show" overlayOpacity="1">
		<view class="top">
			<view :style="{ height: $u.addUnit(30 + $u.sys().statusBarHeight, 'px'), }"></view>
			<view class="header">
				<image @click="handleClose" src="/static/play/right.png"
					style="transform: rotateZ(180deg);width: 24rpx;height: 24rpx;">
				</image>
				<image style="width: 96rpx;height: 96rpx;border: 3rpx solid #FFFFFF;border-radius: 100%;"
					mode="aspectFill" :src="userInfo.avatar"></image>
				<view style="color: #fff;">
					<view>{{userInfo.nickname}}</view>
					<view>
						<text>{{userInfo.age}}</text>
						<text style="padding:0 15rpx;">|</text>
						<text>{{userInfo.city}}</text>
						<text style="padding:0 15rpx;" v-if="userInfo.work">|</text>
						<text v-if="userInfo.work">{{userInfo.work}}</text>
					</view>
				</view>
			</view>
		</view>
		<swiper :current="current" class="swiper" vertical @change="currentChange" v-if="swipeShow">
			<swiper-item v-for="(item,index) in images.slice(0,1)" class="swiper-item" @touchstart="touchstart"
				@touchmove="touchmove" @touchend="touchend">
				<image style="width: 100%;height: 65%;" :src="item" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item v-for="(item,index) in images.slice(1,images.length-1)" class="swiper-item">
				<image style="width: 100%;height: 65%;" :src="item" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item v-for="item in images.slice(-1)" class="swiper-item" @touchstart="touchstart"
				@touchmove="touchmove" @touchend="touchend">
				<image style="width: 100%;height: 65%;" :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="right">
			<view class="right-box" :style="{ marginTop: imageBot}">
				<image :class="{'active-image':imgCurrent==index}" :src="item" v-for="(item,index) in images"
					mode="aspectFill"></image>
			</view>
		</view>
		<view class="bot">
			<view @click="tapWechat">
				<image src="/static/previewImage/weixin.png"></image>
				<text>查看微信</text>
			</view>
			<view @click="tapPrivateChat">
				<image src="/static/previewImage/xiaoxi.png"></image>
				<text>发消息</text>
			</view>
			<view @click="handleXyg(1)">
				<image src="/static/previewImage/xiayige.png"></image>
				<text>下一个</text>
			</view>
		</view>
	</u-popup>
</template>
<script>
	var startPageY, endPageY;
	export default {
		name: "previewImage",
		props: {
			show: {
				default: false
			},
			userInfo: {
				default: () => {
					return {}
				}
			},
			images: {
				default: () => {
					return []
				}
			},
			current: {
				default: 0
			},
			userList: {
				default: () => {
					return []
				}
			},
			currentUserIndex: 0
		},
		watch: {
			show(val) {
				if (val) {
					let a = {
						target: {
							current: this.current
						}
					}
					this.currentChange(a)
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#000',
						success: (res) => {},
						fail: (err) => {}
					})
				} else {
					uni.setNavigationBarColor({
						frontColor: '#000000',
						backgroundColor: '#000',
						success: (res) => {},
						fail: (err) => {}
					})
				}
			},
			images: {
				deep: true,
				handler: function() {
					if (this.images.length === 0) {
						this.swipeShow = false
					} else {
						this.swipeShow = true
						this.currentChange({
							target: {
								current: this.current
							}
						})
					}
				}
			}
		},
		data() {
			return {
				imageBot: 0,
				imgCurrent: 0,
				videotouchstartTimestamp: 0,
				videotouchendTimestamp: 0,
				swipeShow: true
			}
		},
		methods: {
			tabHead() {},
			tapWechat() {
				this.$emit('tapWechat')
			},
			tapPrivateChat() {
				this.$emit('tapPrivateChat')
			},
			currentChange(current) {
				this.imgCurrent = current.target.current
				if (this.images.length > 3) {
					let j = this.images.length - 3
					if (this.imgCurrent > j) {
						let h = j * 118
						this.imageBot = '-' + h + 'rpx'
					} else {
						let h = this.imgCurrent * 118
						this.imageBot = '-' + h + 'rpx'
					}
				} else {
					this.imageBot = 0
				}
			},
			handleClose() {
				this.$emit('close')
			},
			handleXyg(type) {
				let a = 0
				if (type == 1) {
					if (this.currentUserIndex == this.userList.length - 1) {
						uni.showToast({
							title: '没有了~',
							icon: 'none'
						})
						return
					}
					uni.showLoading({
						title:'正在加载...'
					})
					this.imgCurrent = 0
					a = this.currentUserIndex + 1;
				} else {
					if (this.currentUserIndex === 0) {
						uni.showToast({
							title: '第一条~',
							icon: 'none'
						})
						return
					}
					uni.showLoading({
						title:'正在加载...'
					})
					this.imgCurrent = 0
					a = this.currentUserIndex - 1;
				}
				this.$emit('change', this.userList[a], a)
			},
			touchstart(e) {
				console.log(e);
				this.videotouchendTimestamp = this.videotouchstartTimestamp
				this.videotouchstartTimestamp = e.timestamp
				if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
				startPageY = e.changedTouches[0].clientY;
			},
			touchmove(e) {
				if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
				endPageY = e.changedTouches[0].clientY;
				let sliding = endPageY - startPageY
			},
			touchend(e) {
				if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
				endPageY = e.changedTouches[0].clientY;
				let sliding = endPageY - startPageY
				//上滑
				if (sliding < -30) {
					console.log('上滑');
					if (this.imgCurrent === this.images.length - 1) {
						this.handleXyg(1)
					}
				}
				//下滑
				if (sliding > 30) {
					if (this.imgCurrent == 0) {
						this.handleXyg()
					}
				}
			},
		}
	}
</script>
<style lang="scss">
	.swiper {
		width: 100vw;
		height: 100vh;

		.swiper-item {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	::v-deep .u-popup__content {
		background-color: transparent !important;
	}

	.top {
		position: fixed;
		top: 0px;
		left: 0;
		width: 100vw;
		z-index: 9;

		.header {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			grid-gap: 20rpx;
		}
	}

	.right {
		position: fixed;
		top: 700rpx;
		right: 20rpx;
		height: 334rpx;
		overflow: hidden;

		.right-box {
			display: flex;
			flex-direction: column;
			grid-gap: 20rpx;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 12rpx;
				border: 1rpx solid rgba(0, 0, 0, 0);
			}
		}

		.active-image {
			border: 1rpx solid #FFFFFF !important;
		}
	}

	.bot {
		display: flex;
		justify-content: space-around;
		grid-gap: 10rpx;
		position: fixed;
		bottom: 40rpx;
		left: 0;
		width: 100vw;
		z-index: 9;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			padding: 15rpx 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 34rpx;
			font-size: 28rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>